<template>
  <view>
    <!-- H5登录弹窗 -->
    <u-popup :show="show" :round="30" mode="center" @close="close" @open="open">
      <view class="showLoginMask">
        <view class="title">参与活动请登录</view>
        <view class="input">
          <view class="phone">
            <select>
              <option>+86</option>
              <option>+851</option>
            </select>
            <input
              type="number"
              maxlength="11"
              v-model="mobile"
              placeholder-style="font-size:26rpx"
              placeholder="请输入手机号"
            />
            <button @click="getVerify()">
              {{ !captchaTime ? '发验证码' : captchaTime + 's' }}
            </button>
          </view>
          <view class="code">
            <view style="letter-spacing: 3rpx; width: 120rpx;">验证码</view>
            <input
              type="number"
              v-model="verifycode"
              maxlength="4"
              placeholder-style="font-size:26rpx"
              placeholder="请输入验证码"
            />
          </view>
        </view>
        <view class="submit_btn" @click="submit">
          <button>登录</button>
        </view>
        <!-- <view
		  class="register"
		  @click="Register()"
		  style="
		    width: 30%;
		    text-align: center;
		    font-size: 24rpx;
		    color: #999999;
		    margin: 30rpx auto;
		  "
		>
		  <text></text>
		  注册
		</view> -->
        <view class="agree_read">
          <label class="radio">
            <radio-group @change="onAgree">
              <radio value="1" :checked="checked" @tap="Checked()"></radio>
            </radio-group>
          </label>
          已阅读并同意
          <text @tap="userAgreement()">《用户协议》</text>
          和
          <text @tap="privacyAgreement()">《隐私保护指引》</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from '@/request/api.js'
export default {
  name: 'loginPop',
  data() {
    return {
      show: false, //控制打开还是不打开
      /* 登录 */
      mobile: '',
      verifycode: '',
      captchaTime: 0, //验证码倒计时
      agreeValue: '', //同意协议
      page: 1,
      checked: false,
      hasLogin: false,
    }
  },
  methods: {
    open() {
      console.log('open')
      this.show = true
    },
    close() {
      this.show = false
      this.$emit('close')
      // console.log('close');
    },
    // 勾选同意协议
    onAgree(e) {
      this.agreeValue = e.detail.value
    },
    Checked() {
      let check = this.checked
      if (check) {
        this.checked = false
        this.$emit('close')
      } else {
        this.checked = true
      }
    },
    submit() {
      let openid = uni.getStorageSync('openid')
      if (!this.agreeValue) {
        uni.showToast({
          title: '请先勾选！',
          icon: 'error',
        })
        return
      } else {
        if (!this.verifycode) {
          uni.showToast({
            title: '验证码不能为空',
            icon: 'none',
          })
        } else {
          api
            .submitLogin({
              mobile: this.mobile,
              code: this.verifycode,
              openid: openid,
            })
            .then((res) => {
              console.log(res)
              if (res.code == false) {
                uni.showToast({
                  title: '登录失败，请重试！',
                  icon: 'error',
                })
              } else {
                this.show = false
                this.$emit('close')
                uni.showToast({
                  title: '登录成功！',
                })
                this.mobile = ''
                this.verifycode = ''
                this.hasLogin = true
                uni.setStorageSync('hasLogin', true)
                uni.setStorage({
                  key: 'userInfo',
                  data: {
                    nickName: res.data.nickname,
                    avatarUrl: res.data.avatar,
                    token: res.data.token,
                    is_auth: res.data.is_auth,
                    uid: res.data.uid,
                    mobile: res.data.mobile,
                    update_time: res.data.update_time,
                    nft_address: res.data.nft_address,
                  },
                  complete: (res) => {
                    console.log(res)
                  },
                })
                // 跳转
                uni.switchTab({
                  url: '/pages/index/index',
                })
              }
            })
        }
      }
    },
    getVerify() {
      /* 手机号验证 */
      let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (!this.mobile) {
        //判断如果手机号为空，提示用户输入手机号
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        })
        return
      } else if (!reg.test(this.mobile)) {
        //判断手机号格式时候正确
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
        })
        return
      } else {
        // 获取验证码
        api
          .getVerifyCode({
            mobile: this.mobile,
          })
          .then((res) => {
            console.log(res)
            if (res.code == true) {
              this.captchaCountdown()
            } else {
              this.captchaCountdown()
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    //验证码倒计时
    captchaCountdown() {
      console.log(555)
      if (this.captchaTime > 0) {
        uni.showToast({
          title: '不能重复获取',
          icon: 'none',
        })
        return
      } else {
        this.captchaTime = 60
        let timer = setInterval(() => {
          this.captchaTime--
          console.log(this.captchaTime)
          if (this.captchaTime < 1) {
            clearInterval(timer)
            this.captchaTime = 0
          }
        }, 1000)
      }
    },

    // radio选中
    agreeRadio(e) {
      console.log(e)
      this.agreeValue = e.detail.value
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
  },
}
</script>
<style lang="scss">
* {
  font-weight: bold;
}
/*登录弹框*/
.showLoginMask {
  width: 600rpx;
  margin: auto;
  .title {
    font-size: 36rpx;
    padding: 30rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .subTitle {
    font-size: 22rpx;
    text-align: center;
    color: #999999;

    text {
      font-weight: bold;
      color: #999999;
    }
  }

  .input {
    display: flex;
    flex-direction: column;
    width: 85%;
    font-size: 26rpx;
    margin: 60rpx auto 0;

    .phone {
      display: flex;
      width: 100%;
      padding-bottom: 5rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #ccc;

      select {
        width: 120rpx;
        background: none;
        border: 0;
        font-weight: bold;
      }
      /deep/select option {
        font-weight: bold !important;
      }
      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 45%;
        margin: 0 20rpx;
      }

      button {
        width: 130rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 15rpx 0;
        font-size: 20rpx;
        font-weight: 300;
        background-color: #4effff;
        border-radius: 20rpx;
        border: 0;
        padding: 0;
      }
    }

    .code {
      display: flex;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding-bottom: 5rpx;
      border-bottom: 1rpx solid #ccc;

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }
    }
  }

  .submit_btn {
    width: 85%;
    margin: 70rpx auto 30rpx;
    height: 80rpx;
    border: 0;

    button {
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 36rpx;
      font-size: 24rpx;
      border: 0;
    }
  }

  .agree_read {
    width: 100%;
    margin: auto;
    font-size: 22rpx;
    letter-spacing: -1rpx;
    color: #999999;
    padding-bottom: 80rpx;
    text-align: center;

    text {
      color: dodgerblue;
    }
  }
}

// 注册弹窗
.showRegisterMask {
  width: 600rpx;
  margin: auto;
  padding: 40rpx 0 20rpx 0;

  .content_text {
    width: 80%;
    margin: 50rpx auto;
    font-size: 26rpx;
    color: #4d4d4d;
  }
}

.watermark {
  width: 260rpx;
  height: 48rpx;
  padding: 62rpx 0;
  margin: auto;
}

/deep/ uni-radio-group {
  display: inline !important;
}
</style>
